<template>
	<view class="page">
		<text class="t1">Hello uni-app</text>
		<text class="t2">今天是个好日子</text>
		
		<view class="sec">
			<text class="label">数据绑定:</text>
			<text class="txt">id: 1 name: uni-app</text>
			<text class="txt">id: 2 name: HTML</text>
		</view>
		<view class="sec">
			<button size="mini" @click="handleClick">点击事件处理</button>
		</view>
		<view class="sec">
			<text class="txt">列表渲染:</text>
			<text class="txt" v-for="(item,index) in arr" :key="item.id">
				<view style="color: blue;">{{index + 1}}:{{item.name}}</view>
			</text>
		</view>
		<view class="sec">
			<text class="label">1.title: How to do lists in Vue</text>
			<text class="txt">2.author: Jane Doe</text>
			<text class="txt">3.publishedAt: 2020-04-10</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				grammerList: true,
				arr: [
					{id: 1, name: 'uni-app'},
					{id: 2, name: 'HTML'}
				]
			};
		},
		methods: {
			handleClick() {
				uni.showToast({
					title:'你点击了按钮',
					icon:'none'
				});
			}
		}
	}
</script>

<style>
	.page{
		padding: 25rpx;
	}
	.t1{
		text-align: center;
		display: block;
		font-size: 30rpx;
		font-weight: bold;
	}
	.t2{
		text-align: center;
		display: block;
		font-size: 20rpx;
		color: aqua;
		margin-bottom: 30rpx;
	}
	.sec{
		text-align: center;
		margin: 20rpx 0;
	}
	.label{
		text-align: center;
		font-weight: bold;
		margin-right: 15rpx;
	}
	.txt{
		text-align: center;
		display: block;
		line-height: 2.0;
	}
</style>
